<template>

  <div class="shoptype">
    <div style="margin-top: 20px">
      <van-nav-bar style="color: black" title=商品 left-text="返回" @click-left="tomall()">

        <template #right>
          <van-icon color="black"  name="shopping-cart-o" size="20" @click="tocart()"/>
          <van-icon style="margin-left: 15px" color="black" name="search" size="20" @click="tosearch()" />
        </template>

      </van-nav-bar>
    </div>
    <div>
      <van-grid square>
        <van-grid-item v-for="m in meun" :key="m" @click="s_type(m.id)">
          <img class="mal-dh-imgs" :src="m.img"/>
          <p>{{ m.name }}</p>
        </van-grid-item>
      </van-grid>
    </div>

      <div class="two-tbs">
        <van-tabs class="tbs" >
        <van-tab title="商品" >

            <div class="sp-lx" v-for="s in shop" :key="s">
              <img  class="mal-gd-imgs" :src="s.img" @click="shooping(s.id)" >
              <div>
                <label class="sp-tp-na" >{{s.name}}</label ><br>
                <span style="color: #ee0a24;font-size: 9px">商品价格:￥{{ s.discount }}</span >
                <span style="color: #8d8c8c;text-decoration: line-through;margin-left: 10px;font-size: 9px">￥{{ s.price}}</span ><br>
                <span style="color: orangered;font-size: 10px;margin-right: 40px">商品销量:{{s.sale}}</span>
                <span style="color: lightslategrey;font-size: 10px">库存:{{s.room}}</span>
              </div>
            </div>


        </van-tab>

          <van-tab disabled  title="晒单" style="margin-left: 10px">

          </van-tab>
      </van-tabs>

      </div>


    </div>
</template>

<script>
export default {
  name: "ShopTypeView",
  data(){
    return{
      shop:
      [
        {
          id:"",
          img: "",
          name: "",
          price: "",
          discount:"" ,
          sale:"",
          room:""
        }],
      cart:{
        mid:"",
        num:""
      },
      meun: [
        {
          id:1,
          name: "家庭器械",
          img: require("../assets/images/mall-dh1.jpg")
        },
        {
          id:2,
          name: "运动手环",
          img: require("../assets/images/mall-dh2.jpg")
        },
        {
          id:3,
          name: "运动装备",
          img: require("../assets/images/mall-dh3.jpg")
        },
        {
          id:4,
          name: "健康食品",
          img: require("../assets/images/mall-dh4.jpg")
        },
      ]
    }
  },
  methods:{
    tomall() {
      this.$router.push("/mall");
    },
    shooping(id) {

      this.cart.mid=id
      this.cart.num+=1;

      this.axios.post("api/mallcart/add.do",this.cart).then((r)=>{
        if (r.data.code==200) {
          this.$toast('加入购物车成功')
        }else {
          this.$toast('加入购物车失败')
        }
      })
    },
    s_type(id){
      this.axios.get("/api/mall/mall.do?id="+id).then(r=>{
        if(r.data.code==200) {
          //console.log(r.data.data)
          this.shop=r.data.data;
        } else {
          this.$toast(r.data.msg);
        }
      })

    },
    tocart() {
      this.$router.push("/cart");
    },
    tosearch(){
      this.$router.push("/search");
    },
    allList(){
      this.axios.get("/api/mall/mallall.do").then(m => {
        if (m.data.code == 200) {
          //console.log(m.data.data)
          this.shop = m.data.data;
        }
      })
    },
    searchList(value){
      this.axios.get("/api/mall/like.do",{params:{name:value} })
          .then(m => {
        if (m.data.code == 200) {
          //console.log(m.data.data)
          this.shop = m.data.data;
        }
      })
    }
  },
  mounted() {
    this.s_type(this.$route.query.id)
    //console.log("----------",this.$route.query.id)
    this.axios.get("/api/mall/mallall.do").then(m=>{
      if (m.data.code==200) {
        //console.log(m.data.data)
        this.shop=m.data.data;
      }
    })
    if(this.$route.query.id){
      this.s_type(this.$route.query.id)
    }else if(this.$route.query.value){
      this.searchList(this.$route.query.value)
    }
    else {
      this.allList()
    }

    //console.log("----------", this.$route.query.value)

  }

}
</script>e

<style scoped>
.two-tbs{
  margin-top: 10px;
  width: 100%;
  height:50px;
  float: left;
}
.sp-tp-na {
  font-size: 12px;
  font-weight: bold;
}
.tbs{
  /*width: 50%;*/
  /*float: left;*/
}
.tbs-right{
  margin-left: 10px;
  /*width: 46%;*/
  /*height:50px;*/
  float: left;

}
.mal-gd-imgs{
  width: 180px;
  height: 200px;
  border-radius: 5px;
}
.sp-lx{
  width: 40%;
  border-radius: 5px;
  margin-right: 10px;
  margin-top:10px;
  margin-left: 20px;
  float: left;
  border:1px solid #DCDCDC;
}
.mal-dh-imgs {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

</style>
